<template>
  <div class="user-page">
    <div class="user-page-left">
      <div class="title">企业组织架构</div>
      <div class="tree-box" v-loading="treeLoading">
        <el-tree
          ref="treeRefDom"
          class="filter-tree"
          :data="treeData"
          :props="treeProps"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        >
        </el-tree>
        <el-button
          type="primary"
          style="width: 100%; margin-top: 20px"
          plain
          @click="refreshTreeFun"
          >刷新</el-button
        >
      </div>
    </div>
    <div
      class="user-page-right"
      v-loading="rightLoading"
      element-loading-text="加载中..."
    >
      <div class="right-header">
        <div style="white-space: nowrap">
          <el-form inline>
            <el-form-item style="margin-bottom: 0; margin-right: 10px">
              <el-select
                v-model="searchForm.status"
                placeholder="状态"
                clearable
              >
                <el-option label="有效" :value="1" />
                <el-option label="无效" :value="0" />
              </el-select>
            </el-form-item>
            <el-form-item style="margin-bottom: 0; margin-right: 10px">
              <el-select
                v-model="searchForm.is_quit"
                placeholder="是否离职"
                clearable
              >
                <el-option label="在职" :value="0" />
                <el-option label="离职" :value="1" />
              </el-select>
            </el-form-item>
            <el-form-item style="margin-bottom: 0; margin-right: 0">
              <el-button
                style="margin-left: 10px"
                type="primary"
                @click="searchFun"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-button :icon="Upload" @click="uploadFun">导入</el-button>
          <el-button type="success" @click="downFun"
            ><el-icon> <IEpDownload /> </el-icon>导出</el-button
          >
          <!-- <el-button :icon="Refresh">同步到企业微信</el-button> -->
          <el-button type="primary" :icon="Plus" @click="addUsertFun('add')"
            >增加员工</el-button
          >
        </div>
      </div>
      <div class="user-table">
        <el-table
          stripe
          :data="tableData"
          :height="store.tableHeight - 30"
          row-key="id"
          default-expand-all
          border
        >
          <el-table-column
            prop="realname"
            label="真实姓名"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <div class="user-table-realname">
                <div
                  class="title"
                  :style="{ background: row.gender == '女' ? '#D40066' : '' }"
                  v-if="row.realname"
                >
                  {{ row.realname.charAt(row.realname.length - 1) }}
                </div>
                <span>{{ row.realname }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="用户名" />
          <el-table-column prop="mobile" label="手机号" />
          <el-table-column prop="position" label="职务/岗位" />
          <el-table-column prop="role_name" label="角色" />
          <el-table-column prop="gender" label="性别" width="60" />
          <el-table-column prop="status" label="状态" width="80">
            <template #default="{ row }">
              <!-- <el-tag v-if="row.status == 1" type="success">有效</el-tag>
              <el-tag v-else-if="row.status == 0" type="warning">无效</el-tag> -->
              <el-switch
                v-model="row.status"
                :active-value="1"
                :inactive-value="0"
                inline-prompt
                @change="statusFun(row)"
                active-text="有效"
                inactive-text="无效"
              />
            </template>
          </el-table-column>
          <el-table-column prop="" label="是否在职" width="100">
            <template #default="{ row }">
              <!-- <el-tag v-if="row.is_quit == 1" type="danger">离职</el-tag>
              <el-tag v-else-if="row.is_quit == 0">在职</el-tag> -->
              <el-switch
                v-model="row.is_quit"
                :active-value="1"
                :inactive-value="0"
                inline-prompt
                style="
                  --el-switch-on-color: #ff4949;
                  --el-switch-off-color: #13ce66;
                "
                @change="quitFun(row)"
                active-text="离职"
                inactive-text="在职"
              />
            </template>
          </el-table-column>
          <el-table-column label="订单通知" width="100">
            <template #default="{ row }">
              <el-switch
                v-model="row.qyvxo_flag"
                :active-value="1"
                :inactive-value="0"
                inline-prompt
                @change="flagFun(row)"
                active-text="接收"
                inactive-text="否"
              />
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="创建时间" width="170" />
          <el-table-column label="操作" width="190">
            <template #default="{ row }">
              <el-button
                type="primary"
                link
                @click="updateDeptFun('update', row)"
              >
                编辑
              </el-button>
              <el-button type="success" link @click="updatePwFun(row)">
                修改密码
              </el-button>
              <el-button
                v-if="row.status == 0"
                type="danger"
                link
                @click="delFun(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-box">
          <el-pagination
            v-model:currentPage="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[20, 50, 100, 200]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
  <dialogUser
    :treeData="treeData"
    @refreshList="refreshList"
    ref="dialogUserRef"
  />
  <dialogPassword @refreshList="refreshList" ref="dialogPasswordRef" />
  <uploadPage ref="uploadPageRef" @updateList="updateList" />
</template>
<script setup>
import { Refresh, Plus, Upload } from "@element-plus/icons-vue";
import { listApi } from "@/plugins/api/system/dept";
import {
  deptUserApi as userListApi,
  stateApi,
  quitApi,
  delApi,
  exportApi,
  qyvxSendApi,
} from "@/plugins/api/system/user";
import { useCounterStore } from "@/stores/counter.js";
import dialogUser from "./components/DialogUser.vue";
import dialogPassword from "./components/DialogPassword.vue";
import uploadPage from "./components/UploadFile.vue";
const store = useCounterStore();
// 左侧树
let treeProps = {
  label: "name",
};
let treeData = ref([]);
let treeLoading = ref(false);
let treeRefDom = ref(null);
function getData() {
  treeLoading.value = true;
  listApi()
    .then((data) => {
      nextTick(() => {
        treeRefDom.value.setCurrentKey(5);
      });
      treeData.value = data;
      treeLoading.value = false;
    })
    .catch(() => {
      treeLoading.value = false;
    });
}

let selectUser = ref({});
function handleNodeClick(row) {
  selectUser.value = Object.assign({}, row);
  currentPage.value = 1;
  total.value = 0;
  tableData.value = [];
  nextTick(() => {
    treeRefDom.value.setCurrentKey(row.id);
  });
  getUser();
}
// 左侧树刷新
function refreshTreeFun() {
  selectUser.value = {};
  searchForm.value = {};
  nextTick(() => {
    treeRefDom.value.setCurrentKey(null);
  });
  getUser();
}
//
let dialogUserRef = ref(null);
let searchForm = ref({});
function addUsertFun() {
  dialogUserRef.value.initFun("add");
}
// 子组件触发
function refreshList() {
  currentPage.value = 1;
  selectUser.value = {};
  searchForm.value = {};
  getUser();
}
// 分页
let tableData = ref([]);
let rightLoading = ref(false);
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
const handleSizeChange = (val) => {
  pageSize.value = val;
  getUser();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getUser();
};
function searchFun() {
  currentPage.value = 1;
  getUser();
}
function getUser() {
  rightLoading.value = true;
  userListApi({
    status: searchForm.value.status,
    is_quit: searchForm.value.is_quit,
    dept_id: selectUser.value.id,
    page: currentPage.value,
    pageSize: pageSize.value,
  })
    .then((data) => {
      tableData.value = data.list;
      total.value = data.page.total;
      rightLoading.value = false;
    })
    .catch(() => {
      rightLoading.value = false;
    });
}
function updateDeptFun(type, row) {
  dialogUserRef.value.initFun(type, row);
}
function delFun(row) {
  ElMessageBox.confirm("确认删除，是否继续?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delApi({
        id: row.id,
      }).then(() => {
        ElMessage({
          type: "success",
          message: "删除成功！",
        });
        getUser();
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消。",
      });
    });
}
// 状态
function statusFun(row) {
  stateApi({
    status: row.status,
    id: row.id,
  }).then(() => {
    ElMessage({
      type: "success",
      message: "状态修改成功！",
    });
    getUser();
  });
}
// 是否在职
function quitFun(row) {
  quitApi({
    status: row.is_quit,
    id: row.id,
  }).then(() => {
    ElMessage({
      type: "success",
      message: "离职状态修改成功！",
    });
    getUser();
  });
}
// 订单通知
function flagFun(row) {
  qyvxSendApi({
    qyvxo_flag: row.qyvxo_flag,
    id: row.id,
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "修改成功！",
      });
      getUser();
    })
    .catch(() => {
      getUser();
    });
}
// 修改密码
let dialogPasswordRef = ref(null);
function updatePwFun(row) {
  dialogPasswordRef.value.initFun(row);
}
// 导出

function downFun() {
  let obj = Object.assign({}, searchForm.value);
  exportApi(obj).then((res) => {
    const url = window.URL.createObjectURL(new Blob([res]));
    const link = document.createElement("a");
    link.href = url;
    link.setAttribute("download", "通讯录.xlsx");
    document.body.appendChild(link);
    link.click();
  });
}
// 导入
let uploadPageRef = ref(null);
function uploadFun() {
  uploadPageRef.value.initFun();
}
function updateList() {
  getData();
  getUser();
}
//
onMounted(() => {
  getData();
  getUser();
});
</script>
<style lang="scss" scopde>
.user-page {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .user-page-left {
    width: 268px;
    height: 100%;
    background: #f5f6f7;
    border-radius: 6px 6px 6px 6px;
    padding: 10px;
    box-sizing: border-box;

    title {
      font-size: 16px;
      font-weight: bold;
      color: #172b4d;
      line-height: 19px;
    }

    .tree-box {
      height: calc(100% - 30px);
      background: white;
      margin-top: 10px;
      padding: 10px;
      box-sizing: border-box;
      overflow-y: auto;
    }

    .is-current {
      background: #f5f7fa;
    }
  }

  .user-page-right {
    width: calc(100% - 270px);
    height: 100%;
    padding: 0 10px;
    box-sizing: border-box;

    .right-header {
      display: flex;
      justify-content: space-between;

      :deep(.el-form-item) {
        margin-bottom: 0 !important;
        margin-right: 10px !important;
      }
    }

    .user-table {
      margin-top: 10px;

      .user-table-realname {
        display: flex;

        .title {
          align-self: center;
          width: 30px;
          height: 30px;
          min-width: 30px;
          text-align: center;
          line-height: 30px;
          background: #005ecc;
          border-radius: 50%;
          color: white;
        }

        span {
          align-self: center;
          margin-left: 5px;
        }
      }
    }
  }
}
</style>
